<template>
	<div class="view">
		<div class="items-view" 
			v-for="(items, index) in data"
			v-if="data[index].isShow">
			<span class="name" v-text="items.name"></span>
			<div class="label-panel">
				<span class="label" 
					v-bind:class="{'label-select': items.current == lindex}" 
					v-for="(item, lindex) in (items.type == 1 ? items.attributes : items.labels)" 
					@click="selectItem(item, items, index, lindex)">
					{{items.type == 1 ? item.name : item.label}}
				</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
			}
		},
		methods:{
			selectItem: function (item, items, index, lindex) {
				var $this = this;
				items.current = lindex;
				this.$set(this.data, index, items);
				if(items.type == 1) {//属性
					this.$set(this.data, 0, items);
					var temp = $this.data[4];
					temp.isShow = (item.hasDuration == 1);
					this.$set(this.data, 4, temp);
					
					var temp = $this.data[5];
					temp.isShow = (item.hasEpisodes == 1);
					this.$set(this.data, 5, temp);
					
					var temp = $this.data[6];
					temp.isShow = (item.hasBoxOffice == 1);
					this.$set(this.data, 6, temp);
				} 
				this.$emit('on-item', item, items, index, lindex);
		    }
		}
	}
</script>

<style scoped="scoped">
	.view {
		margin-bottom: -10px;
	}
	
	.items-view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		align-items: center;
		-webkit-align-items: center;
		-moz-align-items: center;
		margin-bottom: 10px;
	}
	
	.name {
		font-size: 14px;
		margin-right: 10px;
		text-align: right;
		display: block;
		width: 80px;
	}
	
	.label-panel {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		align-items: center;
		-webkit-align-items: center;
		-moz-align-items: center;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		margin-top: -10px;
		flex: 1;
		-webkit-flex: 1;
		-moz-flex: 1;
	}
	
	.label {
		font-size: 13px;
		border: 1px solid #000000;
		border-radius: 2px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		padding: 2px 6px;
		margin-right: 8px;
		color: #000000;
		opacity: 0.87;
		cursor: pointer;
		margin-top: 10px;
	}
	
	.label:hover {
		color: #FF0000;
		border: 1px solid #FF0000;
	}
	
	.label-select {
		color: #FF0000;
		border: 1px solid #FF0000;
	}
</style>